<template>
	<view class="content font_family" v-if="bus_msg">
		<u-sticky offsetTop='0rpx' customNavHeight='0rpx'>
			<view class="top" :style="{paddingTop:menuButtonInfo}">
				<view class="back f_j" @click="back">
					<image src="../../static/public/back_h.png" mode=""></image>
					<view class="name">
						ta的商品
					</view>
				</view>
				<view class="sj_msg f_j">
					<u-avatar mode='aspectFill' size="114rpx" :src="bus_msg.avatar"></u-avatar>
					<view class="sj_name">
						<view class="name">
							{{bus_msg.username}}
						</view>
						<view class="num">
							商品数：{{bus_msg.goods_nums}}
						</view>
					</view>
					<view class="btn f_zj" @click="login_go(`/pages/msg/msg_room?id=${query_data.ta_id}`)">
						聊一聊
					</view>
				</view>
				<view class="menu">
					<u-tabs :list="menu" lineColor='#EB5548' :activeStyle='activeStyle' :inactiveStyle='inactiveStyle'
						@click="click"></u-tabs>
				</view>
			</view>
		</u-sticky>

		<!-- <u-tabs :current='san_current' :list="san_menu" lineColor='#EB5548' :activeStyle='activeStyle'
			:inactiveStyle='inactiveStyle' @click="san_click"></u-tabs> -->
		<scroll-view scroll-x="true">
			<view class="san_tab">
				<view class="item" :class="{item_in:san_jh==index}" v-for="(item,index) in san_menu" :key="index"
					@click="san_click(item,index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="list f_z_b f_w" v-if="list.length>0">

			<commodity type='2' v-for="(item,index) in list" :key="index" :item='item'></commodity>
		</view>
		<view class="" v-else>
			<u-empty text='没有商品哦~' icon="/static/public/kong.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { category_list, goodsList } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo'])
		},
		data() {
			return {
				menu: [],
				san_menu: [],
				san_jh: 0,
				activeStyle: {
					fontWeight: 600,
					fontSize: '28rpx',
					color: '#3D3D3D',
				},
				inactiveStyle: {
					fontWeight: 400,
					fontSize: '28rpx',
					color: '#8A8B94',
				},
				query_data: {
					page: 1,
					ta_id: '',
					category_id: ''
				},
				bus_msg: '',
				list: [],
				more: 'loadmore',

			}
		},
		onLoad(e) {
			this.query_data.ta_id = e.id
			this.get_category()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			click(e) {
				this.san_jh = 0
				this.san_menu = e.children
				this.query_data.category_id = e.children[0].id
				this.list = []
				this.query_data.page = 1
				this.get_list()
			},
			san_click(e, index) {
				this.san_jh = index
				this.query_data.category_id = e.id
				this.list = []
				this.query_data.page = 1
				this.get_list()
			},
			// 获取分类列表
			get_category() {
				category_list().then(res => {
					if (res.code == 1) {
						this.menu = res.data
						this.san_menu = res.data[0].children
						this.query_data.category_id = res.data[0].children[0].id
						this.get_list()
					}

				})
			},
			// 获取他的商品列表
			get_list() {
				// console.log(this.query_data)
				goodsList(this.query_data).then(res => {
					if (res.code == 1) {
						this.bus_msg = res.data.user_info
						if (res.data.data.data.length > 0) {
							this.query_data.page += 1
							this.list = [...this.list, ...res.data.data.data]
							this.more = 'loadmore'
							console.log(this.list)
						} else {
							this.more = 'nomore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.top {
			background: linear-gradient(180deg, #FFD8D4 0%, #FFFFFF 40%);

			.back {
				padding: 0rpx 30rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				.name {
					margin-left: 230rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #232323;
				}
			}

			.sj_msg {
				padding: 30rpx;

				.sj_name {
					margin-left: 20rpx;

					.name {
						font-weight: 400;
						font-size: 32rpx;
						color: #232323;
						margin-bottom: 15rpx;
					}

					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.btn {
					width: 152rpx;
					height: 56rpx;
					background: #EE4133;
					border-radius: 480rpx 480rpx 480rpx 480rpx;
					margin-left: auto;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.san_tab {
			white-space: nowrap;

			.item {
				color: #8A8B94;
				padding: 15rpx 30rpx;
				display: inline-block;
			}

			.item_in {
				color: #EE4133;
			}
		}

		.list {
			padding: 30rpx;
			padding-top: 10rpx;
		}
	}
</style>